<template>
  <div class="right_box">
    <div ref="box1" class="box1">
      <div ref="content">
        <div v-for="(item, index) in logInfo" :key="index" class="item1">
          <span class="title1">{{ item.childNodeName }}</span>
          <span class="time">{{ item.createTime }}</span>
          <span class="msg">{{ item.msg }}</span>
        </div>
        <div style="height: 100px;" />
      </div>
    </div>
  </div>
</template>

<script>
import animejs from 'animejs'
export default {
  name: 'RightBox',
  props: {
    logInfo: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {}
  },
  watch: {
    logInfo() {
      this.$nextTick(() => {
        const h1 = this.$refs.box1.scrollHeight
        const h2 = this.$refs.content.offsetHeight
        const h3 = this.$refs.box1.offsetHeight
        if (h2 > h3) {
          animejs({
            targets: this.$refs.box1,
            scrollTop: h1 - h3,
            duration: 800,
            easing: 'easeInOutQuad'
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.right_box {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 10px;
}
[class^="box"] {
  border: 1px solid #0f5c78;
  background: #172c3b;
}
.box1 {
  overflow-y: auto;
  flex: 1;
  padding: 0 10px;
  font-size: 14px;
  &::-webkit-scrollbar {
    width: 0;
  }
  .item1 {
    margin: 15px 0;
  }
  .title1 {
    color: #61ace6;
  }
  .time {
    margin: 0 10px;
    color: #698b98;
  }
  .msg {
    color: #639a59;
  }
}
</style>
